/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useState } from 'react'
import MyHeader from './MyHeader'
import MyFooter from './MyFooter'
import GoodsItem from './GoodsItem'

import 'bootstrap/dist/css/bootstrap.css'
import './shop.css'
export default function Shop() {
  /* 步骤分析
1-数据展示==列表和底部
  1-1 定义useState
  1-2 需要做本地缓存，缓存中有数据直接获取，没有就去取arr
  1-3 需要将数据传递过去
2-全选
  2-1需要传递一个函数会返回一个改变之后的状态值
  2-2 使用setFlag更改全选的状态值
3-改变单个复选框的状态
  3-1 需要传递一个函数 changeHandle
  3-2 函数会接收当前点击行的 id, state
  3-3 根据id获取当前这一项来实现更改当前值，需要使用setList
4-实现反选
  4-1 useEffect 来实现监听list
  4-2 判断每一项的状态值是不是true或者false
  4-3 将判断后的返回值使用setFlag更改全选状态值
*/
  const arr = [
    {
      id: 1,
      goods_name:
        '班俏BANQIAO超火ins潮卫衣女士2020秋季新款韩版宽松慵懒风薄款外套带帽上衣',
      goods_img: 'https://www.escook.cn/vuebase/pics/1.png',
      goods_price: 108,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 2,
      goods_name:
        '嘉叶希连帽卫衣女春秋薄款2020新款宽松bf韩版字母印花中长款外套ins潮',
      goods_img: 'https://www.escook.cn/vuebase/pics/2.png',
      goods_price: 129,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 3,
      goods_name:
        '思蜜怡2020休闲运动套装女春秋季新款时尚大码宽松长袖卫衣两件套',
      goods_img: 'https://www.escook.cn/vuebase/pics/3.png',
      goods_price: 198,
      goods_count: 1,
      goods_state: false,
    },
    {
      id: 4,
      goods_name:
        '思蜜怡卫衣女加绒加厚2020秋冬装新款韩版宽松上衣连帽中长款外套',
      goods_img: 'https://www.escook.cn/vuebase/pics/4.png',
      goods_price: 99,
      goods_count: 1,
      goods_state: false,
    },
    {
      id: 5,
      goods_name:
        '幂凝早秋季卫衣女春秋装韩版宽松中长款假两件上衣薄款ins盐系外套潮',
      goods_img: 'https://www.escook.cn/vuebase/pics/5.png',
      goods_price: 156,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 6,
      goods_name: 'ME&CITY女装冬季新款针织抽绳休闲连帽卫衣女',
      goods_img: 'https://www.escook.cn/vuebase/pics/6.png',
      goods_price: 142.8,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 7,
      goods_name:
        '幂凝假两件女士卫衣秋冬女装2020年新款韩版宽松春秋季薄款ins潮外套',
      goods_img: 'https://www.escook.cn/vuebase/pics/7.png',
      goods_price: 219,
      goods_count: 2,
      goods_state: true,
    },
    {
      id: 8,
      goods_name:
        '依魅人2020休闲运动衣套装女秋季新款秋季韩版宽松卫衣 时尚两件套',
      goods_img: 'https://www.escook.cn/vuebase/pics/8.png',
      goods_price: 178,
      goods_count: 1,
      goods_state: true,
    },
    {
      id: 9,
      goods_name:
        '芷臻(zhizhen)加厚卫衣2020春秋季女长袖韩版宽松短款加绒春秋装连帽开衫外套冬',
      goods_img: 'https://www.escook.cn/vuebase/pics/9.png',
      goods_price: 128,
      goods_count: 1,
      goods_state: false,
    },
    {
      id: 10,
      goods_name:
        'Semir森马卫衣女冬装2019新款可爱甜美大撞色小清新连帽薄绒女士套头衫',
      goods_img: 'https://www.escook.cn/vuebase/pics/10.png',
      goods_price: 153,
      goods_count: 1,
      goods_state: false,
    },
  ]

  const [list, setList] = useState(
    JSON.parse(localStorage.getItem('list')) || arr
  )
  const [flag, setFlag] = useState(false)
  /* 全选的切换显示 */
  const changeAll = (flag) => {
    /* 更改全选状态值 */
    setFlag(flag)
    /* 2-实现全选 */
    // list.forEach((item) => {
    //   item.goods_state = flag
    // })
    setList(() => {
      var newList = list.map((item) => {
        return {
          ...item,
          goods_state: flag,
        }
      })
      //3- 做持久化
      localStorage.setItem('list', JSON.stringify(newList))

      return newList
    })
  }
  /* 4-实现点个状态改变 */
  const changeHandle = (id, state) => {
    console.log(id, state, 8888)
    // 更新当前状态
    // var itemObj = list.find((item) => item.id === id)
    // console.log(itemObj, 87)
    // itemObj.goods_state = state
    setList(() => {
      var newList = list.map((item) => {
        if (item.id === id) {
          return {
            ...item,
            goods_state: state,
          }
        } else {
          return { ...item }
        }
      })

      return newList
    })
  }
  useEffect(() => {
    // 循环 判断每一项的状态是不是都是true或者false===实现反选
    var bool = list.every((item) => item.goods_state)
    /* 更改全选状态值 */
    setFlag(bool)
  }, [list])
  return (
    <div className="app">
      <MyHeader>购物车</MyHeader>
      {/* <GoodsItem></GoodsItem>
      <GoodsItem></GoodsItem>
      <GoodsItem></GoodsItem> */}
      {list.map((item) => {
        return (
          <GoodsItem
            key={item.id}
            {...item}
            changeHandle={changeHandle}
          ></GoodsItem>
        )
      })}
      <MyFooter list={list} changeAll={changeAll} flag={flag}></MyFooter>
    </div>
  )
}
